<template>
    <div class="my-templete">
        <div class="main-template-header">
            <div class="main-search">
                <el-input clearable size="small" placeholder="请输入名称查询" v-model.trim="name" @keyup.enter.native="getTemplateList">
                    <el-button slot="append" icon="el-icon-search" @click="getTemplateList"></el-button>
                </el-input>
            </div>
        </div>
        <div class="project-content" v-if="templateList.length">
            <div class="main-single-peoject" v-for="(item, index) in templateList" :key="index" @click="editProject(item, '1')">
                <div class="thumb">
                    <img :src="getImg(item.preview)" :alt="item.name" />
                </div>
                <div class="deacribe">
                    <div class="name">{{ item.name }}</div>
                </div>
            </div>
        </div>
        <el-empty v-else description="暂无模板数据"></el-empty>
    </div>
</template>

<script>
import request from '@/js/util/url.js';
import message from '@/js/util/message.js';
import user from '@/js/util/user.js';
import config from '@/js/util/config.js';
import icon_default from '@/image/scene/icon_default.svg';
import PATH from '@/js/util/path.js';
import scene from '@/js/main/scene.js';

export default {
    name: 'myTemplete',
    data() {
        return {
            name: '',
            templateList: []
        };
    },
    created() {
        this.getTemplateList();
    },
    methods: {
        getTemplateList() {
            let templateParam = {
                name: this.name,
                token: null
            };
            let result = request.getTemplateList(templateParam);
            this.templateList = [];
            if (result.state.code == 10000 && result.body.message.list) {
                this.templateList = result.body.message.list;
            }
        },
        editProject(item, model) {
            scene.setID(item.id);
            this.$router.push({ path: PATH.HOME, query: { layout: item.layout, model: model } });
            if (user.getPanel() === 'true') {
                this.$store.dispatch('setChartsParams', { layout: item.layout, model: model, id: item.id });
            }
        },
        getImg(url) {
            return url ? `${config.getServiceURL('scene')}service/scene/file/download?file=${url}` : icon_default;
        },
    }
};
</script>

<style lang="scss" scoped>
.my-templete {
    height: 100%;
    overflow: hidden;
    .project-content {
        display: grid;
        grid-gap: 20px;
        flex-wrap: wrap;
        grid-template-columns: repeat(auto-fill, 300px);
        grid-template-rows: auto;
        align-items: center;
        height: calc(100% - 100px);
        overflow: auto;
    }
}
</style>